@charset "UTF-8";
@import '../mixins/index';
@import '../color/colors';

// FTEAM UI THEME DEFAULT IMPORT

$ft-prefix: 'ft';
$ft-unit: 1 * 1px !default;
$ft-hd: 1 !default; // 基本单位 缩放单位 移动端一般都要 没有放大系数这个就需要
$ft-point: $ft-unit * $ft-hd; // 设备中一像素
$ft-px: 1 * 1px; // 用于某些不需要放大的地方，比如按钮高度
$ft-mobile: true; // 是否是用在移动端

// 网页字体
$ft-font-family: '-apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", sans-serif' !default;

// The Color of FTEAM UI Brand
$ft-color-primary: $ft-blue-base !default;
//$ft-color-primary              : $ft-blue-base !default;
// 状态颜色

// 光音规范
// 叠加层参数：#FFFFFF-20% 文字参数：#FFFFFF-100% 光音规范
//$ft-color-primary-press        : tint($ft-color-primary, 20%);
// 叠加层参数：#FFFFFF-40% 文字参数：#FFFFFF-60% 光音规范
//$ft-color-primary-inactive     : tint($ft-color-primary, 40%);

// -------- Colors -----------
//$ft-color-success                   : #07C160 !default; // success-- badge $ft-green-6
//$ft-color-error                     : #FA5151 !default; // error-- badge $$ft-color-red-5
//$ft-color-warning                   : #FA9D3B !default; //waring-- badge $ft-color-gold-6
$ft-color-success: $ft-color-green-6 !default; // success-- badge $ft-green-6
$ft-color-error: $ft-color-red-5 !default; // error-- badge $$ft-color-red-5
$ft-color-warning: $ft-color-gold-6 !default; //waring-- badge $ft-color-gold-6
$ft-color-info: $ft-color-blue-6 !default; // #1890ff
$ft-color-highlight: $ft-color-red-5 !default; // badge dot
$ft-color-processing: $ft-color-green-6 !default; // badge progress
$ft-color-normal: rgba(0, 0, 0, 0.85) !default; // badge normal
$ft-white: #ffffff !default;
$ft-black: #000000 !default;

// https://blog.csdn.net/weixin_34357962/article/details/92683470
// font-feature-settings特性减除字体动画震颤效果实例
$ft-font-variant-df: tabular-nums !default;
$ft-font-feature-settings-df: 'tnum' !default;

// Color used by default to control hover and active backgrounds and for
// alert info backgrounds.
$ft-color-primary-1: generateColor($ft-color-primary, 1); // selected 选中颜色
$ft-color-primary-2: generateColor($ft-color-primary, 2); // unused
$ft-color-primary-3: generateColor($ft-color-primary, 3); // unused
$ft-color-primary-4: generateColor($ft-color-primary, 4); // unused
$ft-color-primary-5: generateColor($ft-color-primary, 5); // hover 悬停颜色
$ft-color-primary-6: $ft-color-primary; // color used to control the text color of active buttons, don't use, use $ft-color-primary
$ft-color-primary-7: generateColor($ft-color-primary, 7); // active click 颜色
$ft-color-primary-8: generateColor($ft-color-primary, 8); // unused
$ft-color-primary-9: generateColor($ft-color-primary, 9); // unused
$ft-color-primary-10: generateColor($ft-color-primary, 10); // unused

// Text Dark Color 黑暗模式
//$ft-color-text-dark-color1  : rgba(255, 255, 255, 0.9) !default; // 主要文字
//$ft-color-text-dark-color2  : rgba(255, 255, 255, 0.8) !default; // 常规文字 副标题
//$ft-color-text-dark-color3  : rgba(255, 255, 255, 0.6) !default; // 次要文字 备注信息
//$ft-color-text-dark-color4  : rgba(255, 255, 255, 0.4) !default; // 占位文字

// Text Light Color
// Title: Black 85%
// primary text: Black 65%
// secondary text: Black 45%
// disable: Black 25%
// border: Black 15%
// divider: Black 6%
// background: Black 4% #Default grey background color
// table header background: Black 2% #background of header and selected item
// 也可以中性文本色代表的色块上，覆盖一层10%透明度的品牌色

$ft-text-color-df: rgbaToHex(rgba(0, 0, 0, 0.85)) !default; // 主要文字 标题 #262626
$ft-text-color-primary: rgbaToHex(rgba(0, 0, 0, 0.65)) !default; // 常规文字 副标题
$ft-text-color-secondary: rgbaToHex(rgba(0, 0, 0, 0.45)) !default; // 次要文字 备注信息
$ft-text-color-placeholder: rgbaToHex(rgba(0, 0, 0, 0.25)) !default; // 占位文字 placeholder
$ft-text-color-selection-bg: $ft-color-primary-6 !default; // 选中文字背景样式，一般是html5端
$ft-text-color-inverse: $ft-white !default; // 反向文字颜色，比如主色背景，这个就是文字颜色
// dark text
$ft-text-color-df-dark: rgba(255, 255, 255, 0.85) !default;
$ft-text-color-primary-dark: rgba(255, 255, 255, 0.65) !default;

$ft-gray-1: #ffffff !default;
$ft-gray-2: #fafafa !default; // @Black 2% Table header #FAFAFA
$ft-gray-3: #f5f5f5 !default; // table header@Black 4% Background（浅色背景） #F5F5F5
$ft-gray-4: #f0f0f0 !default; // @Black 6% Dividers 有些分割线 会使用 10% 深色 #F0F0F0
$ft-gray-5: #d9d9d9 !default; // @Black 15% Border 描边 #D9D9D915 ，前景颜色都是 黑色  其他ant颜色也是一样 yellow  6 用黑色比较合适
$ft-gray-6: #bfbfbf !default; // @Black 25% Disable 或者是(placeholder)占位 #BFBFBF
$ft-gray-7: #8c8c8c !default; // @Black 45% Secondary Text 辅助文字 #8C8C8C
$ft-gray-8: #595959 !default; // @Black 65% Primary Text 正文文字 #595959
$ft-gray-9: #434343 !default; //
$ft-gray-10: #262626 !default; // @Black 85% title 标题文字 #595959
$ft-gray-11: #1f1f1f !default;
$ft-gray-12: #141414 !default;
$ft-gray-13: #000000 !default;

// 透明度
$ft-opacity-active: 0.6 !default; // Button 等组件点击态额透明度
$ft-opacity-disabled: 0.3 !default; // Button 等组件禁用态的透明度

// 背景色
$ft-background-df: rgbaToHex(rgba(0, 0, 0, 0.04)) !default; // Default grey background color
$ft-background-light: rgbaToHex(rgba(0, 0, 0, 0.02)) !default; // background of table header and selected item
// Background color for `<body> <page> <uni-page-wrapper>`
$ft-background-body: $ft-background-df; // 页面背景色
// Base background color for most components
$ft-background-component: #ffffff !default; // 控制组件背景色，可以单独给控件处重新定义
$ft-background-mix-blue: #fafbfc !default; // 带了一点蓝色的背景颜色 #F1F4FA

// 禁用状态
$ft-disabled-background: $ft-background-df; // 常用于背景
$ft-disabled-text-color: rgbaToHex(rgba(0, 0, 0, 0.25)) !default; // 禁用的文字样式
$ft-disabled-text-color-dark: rgbaToHex(rgba(255, 255, 255, 0.35));
// Disabled cursor
$ft-disabled-cursor: not-allowed;

// The background colors for active and hover states for things like
// list items or table cells.
// 比如 ant design 的级联 组件 悬停是hover-bg 选中是active-bg
$ft-item-active-bg: $ft-color-primary-1;
$ft-item-hover-bg: $ft-background-df;

// 图标颜色
$ft-icon-color: inherit !default;
$ft-icon-color-hover: rgbaToHex(rgba(0, 0, 0, 0.75)) !default;

// Font
$ft-font-size-xss: 8 * $ft-point !default; //  非常用字号，用于特小标签 # 很少使用
$ft-font-size-xs: 10 * $ft-point !default; // 非常用字号，用于标签
$ft-font-size-sm: 12 * $ft-point !default; // 用于辅助信息
$ft-font-size-md: 14 * $ft-point !default; // 常用字号
$ft-font-size-lg: 16 * $ft-point !default; // 常规标题
$ft-font-size-xl: 18 * $ft-point !default; // 标题
$ft-font-size-xxl: 20 * $ft-point !default; // 大标题、用于大号的数字
$ft-font-size-sl: 40 * $ft-point !default; // 用于图标、数字等较大显示 下面有icon的size，可以不使用这个
$ft-font-size-xsl: 60 * $ft-point !default; // 用于图标、数字等特大显示 下面有icon的size，可以不使用这个
$ft-font-size-df: $ft-font-size-md; // 常用字号
$ft-heading-1-size: ceil($ft-font-size-df * 2.71); // 38
$ft-heading-2-size: ceil($ft-font-size-df * 2.14); // 30
$ft-heading-3-size: ceil($ft-font-size-df * 1.71); // 24
$ft-heading-4-size: ceil($ft-font-size-df * 1.42); // 20
$ft-heading-5-size: ceil($ft-font-size-df * 1.14); // 16

// Loading
$ft-loading-size: $ft-font-size-df !default;
$ft-loading-color: $ft-color-primary-6 !default;

// animation
$ft-animation-duration: 350ms;
$ft-rotate360-duration: 1200ms;

// ICONFONT
$ft-icon-css-prefix: ftui-icon;

// 图标尺寸 按4 递增
$ft-icon-size-xs: 12 * $ft-point !default;
$ft-icon-size-sm: 16 * $ft-point !default;
$ft-icon-size-md: 20 * $ft-point !default;
$ft-icon-size-lg: 24 * $ft-point !default;
$ft-icon-size-xl: 32 * $ft-point !default;
$ft-icon-size-xxl: 48 * $ft-point !default;
$ft-icon-size-sl: 64 * $ft-point !default;
$ft-icon-size-xsl: 80 * $ft-point !default;
$ft-icon-size-df: $ft-icon-size-lg;

$ft-height-xss-base: 12 !default;
$ft-height-xs-base: 20 !default;
$ft-height-sm-base: 28 !default;
$ft-height-md-base: 36 !default; // 默认高度，适配web比较合适
$ft-height-lg-base: 44 !default;
$ft-height-xl-base: 52 !default;
$ft-height-xxl-base: 60 !default;

// Height rules
// Ant Design
// @height-base: 32px;
// @height-lg: 40px;
// @height-sm: 24px;
$ft-height-xss: $ft-height-xss-base * $ft-point !default; // 12
$ft-height-xs: $ft-height-xs-base * $ft-point !default; // 20
$ft-height-sm: $ft-height-sm-base * $ft-point !default; // 28
$ft-height-md: $ft-height-md-base * $ft-point !default; // 36 默认高度，适配web比较合适
$ft-height-lg: $ft-height-lg-base * $ft-point !default; // 44
$ft-height-xl: $ft-height-xl-base * $ft-point !default; // 52
$ft-height-xxl: $ft-height-xxl-base * $ft-point !default; // 60
$ft-height-df: $ft-height-md; // 默认 md
// ICONFONT

// Line Height
$ft-line-height-cl: 1 !default; // 单行 清除行高
$ft-line-height-en: 1.3 !default; // 英文多行
$ft-line-height-zh: 1.5715 !default; // 中文多行
$ft-line-height-df: $ft-line-height-zh; // 中文多行

// Shadow 距离配置 安卓 Material Design 进行定义 可以根据自己项目调整
$ft-shadow-space-1: 1 * $ft-point !default; // 少用
$ft-shadow-space-2: 2 * $ft-point !default; // 搜索栏、开关、卡片（静止）
$ft-shadow-space-3: 3 * $ft-point !default; // 刷新提示 按钮（静止）
$ft-shadow-space-4: 4 * $ft-point !default; // 顶部应用栏
$ft-shadow-space-6: 6 * $ft-point !default; // 悬浮按钮（静止）
$ft-shadow-space-8: 8 * $ft-point !default; // 底部标签栏、底部应用栏、菜单、卡片（按下）、按钮（按下）
$ft-shadow-space-12: 12 * $ft-point !default; // 悬浮按钮（按下）
$ft-shadow-space-16: 16 * $ft-point !default; // 模态底板、抽屉导航
$ft-shadow-space-24: 24 * $ft-point !default; // 对话框
$ft-shadow-space-df: $ft-shadow-space-2; // 默认

// Shadow
$ft-shadow-color: rgba(0, 0, 0, 0.1); // e6e6e6 hsb(0,0,90)
//$ft-shadow-1-up                   : 0 -1*$ft-point 6*$ft-point $ft-shadow-color;
$ft-shadow-1-up:
  0 -1 * $ft-point 6 * $ft-point rgba(0, 0, 0, 0.08),
  0 -3 * $ft-point 12 * $ft-point rgba(0, 0, 0, 0.05),
  0 -6 * $ft-point 18 * $ft-point rgba(0, 0, 0, 0.03);
$ft-shadow-1-down: 0 1 * $ft-point 6 * $ft-point $ft-shadow-color;
$ft-shadow-1-left: -1 * $ft-point 0 6 * $ft-point $ft-shadow-color;
$ft-shadow-1-right: 1 * $ft-point 0 6 * $ft-point $ft-shadow-color;

// vertical paddings
// 水平间距 按4 递增
$ft-spacing-h-xxl: 24 * $ft-point !default; // containers
$ft-spacing-h-xl: 20 * $ft-point !default; // containers
$ft-spacing-h-lg: 16 * $ft-point !default; // 一般用于页面  small containers and buttons
$ft-spacing-h-md: 12 * $ft-point !default; // 图标和标题间距  Form controls and items
$ft-spacing-h-sm: 8 * $ft-point !default; // small items
$ft-spacing-h-xs: 4 * $ft-point !default; // more small
$ft-spacing-h-xss: 2 * $ft-point !default; // more small

$ft-spacing-h-page: $ft-spacing-h-lg !default; // 16
$ft-spacing-h-df: $ft-spacing-h-sm; // 8

// 垂直间距 按4 递增
$ft-spacing-v-xxl: 24 * $ft-point !default; // containers
$ft-spacing-v-xl: 20 * $ft-point !default; // containers
$ft-spacing-v-lg: 16 * $ft-point !default; // 一般用于页面  small containers and buttons
$ft-spacing-v-md: 12 * $ft-point !default; // 图标和标题间距  Form controls and items
$ft-spacing-v-sm: 8 * $ft-point !default; // small items
$ft-spacing-v-xs: 4 * $ft-point !default; // more small
$ft-spacing-v-xss: 2 * $ft-point !default; // more small
$ft-spacing-v-df: $ft-spacing-v-sm; // small items

// LINK
$ft-link-color: $ft-color-primary;
$ft-link-hover-color: generateColor($ft-link-color, 5);
$ft-link-active-color: generateColor($ft-link-color, 7);
$ft-link-decoration: none;
$ft-link-hover-decoration: none;
$ft-link-focus-decoration: none;
$ft-link-focus-outline: 0;

// Divider
// 分割线 不要使用在List中分割，要使用下面的 border-color-split 颜色
// ant design 不是用于列表的 是一个单独的控件叫 Divider 控件
$ft-divider-color: rgba(0, 0, 0, 0.06); // 常规分割线 web/mobile 端 6% 就够了
$ft-divider-color-strong: rgba(0, 0, 0, 0.12); // 强调分割线
$ft-divider-text-color: rgba(0, 0, 0, 0.45); // 强调分割线
//$ft-divider-text-padding            : 1em;
//$ft-divider-orientation-margin      : 5%;

// Border color
$ft-border-color-df: rgbaToHex(rgba(0, 0, 0, 0.15)); // base border outline a component
$ft-border-color-split: rgbaToHex(
  rgba(0, 0, 0, 0.06)
); // split border inside a component 默认是 94  # ant design pro 用的是 91
$ft-border-color-inverse: $ft-white;
$ft-border-width-hairline: 0.5px; // width of the border for a component
$ft-border-width-df: 1px; // width of the border for a component
$ft-border-width-strong: 4px; // width of the border for a component
$ft-border-style-df: solid; // style of a components border

// Border Radius 2 为增长
$ft-border-radius-sm: 2 * $ft-point !default;
$ft-border-radius-md: 4 * $ft-point !default;
$ft-border-radius-lg: 6 * $ft-point !default;
$ft-border-radius-xl: 8 * $ft-point !default;
$ft-border-radius-xxl: 10 * $ft-point !default;
$ft-border-radius-thumb: $ft-border-radius-md !default; // ant 2， 光音 4
$ft-border-radius-button: $ft-border-radius-sm !default; // ant design 标准
$ft-border-radius-circle: 999px !default; // 理论使用控件高度才是最好的
$ft-border-radius-df: $ft-border-radius-sm !default;

// Button 这里的高度，不用rpx 因为不想要放大高度
$ft-button-text-color: $ft-color-white !default;
$ft-button-text-color-inverse: rgba(0, 0, 0, 0.85) !default;
$ft-button-height-xss: $ft-height-xss-base * $ft-point !default;
$ft-button-height-xs: $ft-height-xs-base * $ft-point !default;
$ft-button-height-sm: $ft-height-sm-base * $ft-point !default;
$ft-button-height-md: $ft-height-md-base * $ft-point !default;
$ft-button-height-lg: $ft-height-lg-base * $ft-point !default;
$ft-button-height-xl: $ft-height-xl-base * $ft-point !default;
$ft-button-height-xxl: $ft-height-xxl-base * $ft-point !default;
$ft-button-height-df: $ft-height-md-base * $ft-point !default; // ant 47 光音 48

// Tag
$ft-tag-height-basic: 12 !default;
$ft-tag-height-step: 4 !default;
$ft-tag-height-xss: $ft-tag-height-basic * $ft-point !default; // 12
$ft-tag-height-xs: $ft-tag-height-basic + (1 * $ft-tag-height-step) * $ft-point !default; // 16
$ft-tag-height-sm: $ft-tag-height-basic + (2 * $ft-tag-height-step) * $ft-point !default;
$ft-tag-height-md: $ft-tag-height-basic + (3 * $ft-tag-height-step) * $ft-point !default;
$ft-tag-height-lg: $ft-tag-height-basic + (4 * $ft-tag-height-step) * $ft-point !default; // 28
$ft-tag-height-xl: $ft-tag-height-basic + (5 * $ft-tag-height-step) * $ft-point !default; // 28
$ft-tag-height-xxl: $ft-tag-height-basic + (6 * $ft-tag-height-step) * $ft-point !default; // 36
$ft-tag-height-xxl: $ft-height-xxl !default; // 60
$ft-tag-height-df: $ft-height-md !default;

//Overlay
$ft-overlay-bg-color: rgba(0, 0, 0, 0.7) !default;

// Badge
$ft-tag-text-color: $ft-color-white !default;
$ft-badge-color: $ft-color-white !default;
$ft-badge-bg-color: $ft-color-red-5 !default;
$ft-badge-font-size: $ft-font-size-sm !default;
$ft-badge-dot-size: 8 * $ft-point !default;

// List
//$ft-ft-list-cell-height        : $ft-height-df;
$ft-list-item-padding: $ft-spacing-h-md $ft-spacing-h-lg; // 默认无边框是没有左右边距的
$ft-list-item-padding-sm: $ft-spacing-h-sm $ft-spacing-h-lg;
$ft-list-item-padding-lg: $ft-spacing-h-lg $ft-spacing-h-lg;

// Form
$ft-form-item-padding: $ft-spacing-h-md $ft-spacing-h-lg;
// 目前这个是默认
$ft-form-item-padding-sm: $ft-spacing-h-sm $ft-spacing-h-lg;
$ft-form-item-padding-lg: $ft-spacing-h-lg $ft-spacing-h-lg;

// Switch
$ft-switch-width: $ft-height-sm * 2; // 默认长度
$ft-switch-height: $ft-height-sm; // 默认高度

// Radio
$ft-radio-size-xs: $ft-icon-size-sm;
$ft-radio-size-sm: $ft-icon-size-md;
$ft-radio-size-md: $ft-icon-size-lg;
$ft-radio-size-lg: $ft-icon-size-xl;
$ft-radio-size-xl: $ft-icon-size-xxl;
$ft-radio-size-df: $ft-radio-size-md;
$ft-radio-font-size-xs: $ft-font-size-sm;
$ft-radio-font-size-sm: $ft-font-size-md;
$ft-radio-font-size-md: $ft-font-size-lg;
$ft-radio-font-size-lg: $ft-font-size-xl;
$ft-radio-font-size-xl: $ft-font-size-xxl;
$ft-radio-font-size-df: $ft-radio-font-size-md;

// Checkbox
$ft-checkbox-size: 26 * $ft-point; // 默认长度
$ft-checkbox-font-size: $ft-height-sm; // 默认高度

// Modal
$ft-modal-duration: 0.3s;
$ft-modal-function: ease-in;
$ft-modal-mask-bg: rgba(0, 0, 0, 0.45);
$ft-modal-header-padding-vertical: $ft-spacing-h-md;
$ft-modal-header-padding-horizontal: $ft-spacing-h-lg;
$ft-modal-body-padding: $ft-spacing-h-lg;
$ft-modal-header-bg: $ft-background-component;

//Cell Group
$ft-cell-group-title-padding: 16px 16px 8px !default;
$ft-cell-group-title-font-size: 15px !default;
$ft-cell-group-title-line-height: 16px !default;
$ft-cell-group-title-color: $ft-text-color-df !default;

// Cell
$ft-cell-padding: 10px 15px !default;
$ft-cell-font-size: 14px !default;
$ft-cell-line-height: 24px !default;
$ft-cell-color: $ft-text-color-df !default;
$ft-cell-icon-size: 16px !default;
$ft-cell-title-font-size: 14px !default;
$ft-cell-title-line-height: 24px !default; // 22
$ft-cell-title-color: $ft-text-color-df !default;
$ft-cell-label-font-size: 12px !default;
$ft-cell-label-color: $ft-text-color-secondary !default;
$ft-cell-label-line-height: 18px !default;
$ft-cell-value-font-size: 14px !default;
$ft-cell-value-color: $ft-text-color-secondary !default;
$ft-cell-clickable-color: $ft-background-df !default;
$ft-cell-disabled-color: $ft-disabled-text-color !default;
$ft-cell-padding-top-large: 13px !default;
$ft-cell-padding-bottom-large: 13px !default;
$ft-cell-value-font-size-large: 15px !default;
$ft-cell-label-font-size-large: 14px !default;
$ft-cell-title-font-size-large: 16px !default;
$ft-cell-left-icon-wrap-margin-right: 4px !default;
$ft-cell-right-icon-wrap-margin-left: 4px !default;
$ft-cell-label-margin-top: 2px !default;

// Card
$ft-card-border-radius: 18 * $ft-point !default;

// NAV
$ft-nav-height: $ft-height-lg-base * $ft-point;
$ft-nav-left-right-font-size: 15 * $ft-point;

// Card
$ft-toast-border-radius: 4 * $ft-point !default;
$ft-toast-padding: 12px 20px !default;
$ft-toast-loading-padding: 20px 20px !default;
$ft-toast-background-color: $ft-gray-8 !default;
$ft-toast-content-text-font-size: 15px !default;
$ft-toast-content-text-line-height: 18px !default;
$ft-toast-content-text-color: #ffffff !default;
$ft-toast-border-width: 1px !default;

// z-index
$ft-z-index-page: 10 !default;
$ft-z-index-divider: 100 !default;
$ft-z-index-backtop: 200 !default;
$ft-z-index-badge: 7000 !default;
$ft-z-index-notify: 7500 !default;
$ft-z-index-nav: 8000 !default;
$ft-z-index-mask-lg: 9100 !default;
$ft-z-index-overlay: 10000 !default;
$ft-z-index-popup: 11000 !default;
$ft-z-index-animation: 12000 !default;
$ft-z-index-keyboard: 13000 !default;
$ft-z-index-toast: 99999 !default;
